<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>门票订单</el-breadcrumb-item>
      
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0;display:flex;justify-content:start;">
            <div>
              <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">景点名称</span>
              <el-input v-model="search" size="small" clearable placeholder="请输入景点名称" prefix-icon="el-icon-search"
                style="width: 150px;" />
            </div>
            <div>
              <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">用户ID</span>
              <el-input v-model.number="s_userId" size="small" clearable placeholder="请输入id" prefix-icon="el-icon-search"
                style="width: 150px;" />
            </div>
            <div>
              <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">订单编号</span>
              <el-input v-model.number="s_orderId" size="small" clearable placeholder="请输入id" prefix-icon="el-icon-search"
                style="width: 200px;" />
            </div>
            <div>
              <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">状态</span>
              <el-select v-model="value" size="small" placeholder="请选择" clearable style="width:90px;margin-right: 20px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>

              </el-select>
            </div>
         
            <div style="margin-right: 20px;">



              <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;"
                size="small">搜索</el-button>
              <el-button icon="el-icon-refresh-left" style="margin-left: 5px;" @click="reset()" size="small">重置</el-button>
              <el-button style="background-color: #143371; color: aliceblue;" size="small"
                  @click="dataTicket">可视化</el-button>
            </div>

            <div>
              <download-excel
                class="export-excel-wrapper"
                :data="tableData"
                :fields="json_fields"
                type="xls"
                worksheet="My Worksheet"
                name="门票订单"
    >
      <el-button style="background-color: #143371; color: aliceblue;"
                size="small">导出</el-button>
    </download-excel>
            </div>
          </div>
        </div>

        <!--    表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%" :row-style="{ height: '32px' }"
          :cell-style="{ padding: '4px' }">

          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="订单编号">
                  <span>{{ props.row.orderId }}</span>
                </el-form-item>
                <el-form-item label="景点名称">
                  <p>{{ props.row.scName }}</p>
                </el-form-item>
                <el-form-item label="下单用户Id">
                  <p>{{ props.row.userId }}</p>
                </el-form-item>
                <el-form-item label="总价">
                  <span style="color: red; font-size: 18px; font-weight: 700;">{{ props.row.sumPrice }}</span>
                  <span>￥</span>
                </el-form-item>
                <el-form-item label="数量">
                  <p>{{ props.row.num }}</p>
                </el-form-item>
                <el-form-item label="下单时间">
                  <p>{{ props.row.createTime }}</p>
                </el-form-item>
                <el-form-item label="订单状态">
                  <el-tag v-if="props.row.status == 0" type="info">未支付</el-tag>
                  <el-tag v-if="props.row.status == 1" type="primary">未使用</el-tag>
                  <el-tag v-if="props.row.status == 2" type="success">已使用</el-tag>
                </el-form-item>
                <el-form-item label="订单详情">
                  <div v-for="(item, index) in props.row.orderDetail" :key="index">
                    <p style="font-weight: 700; font-size: 16px;">订单{{ index + 1 }}:</p>
                    <div style="margin-left: 20px;">
                      <p>预订人:{{ item.bookName }}</p>
                      <p>游玩人：{{ item.palyerName }}</p>
                      <p>票类型：{{ item.typeName }}</p>
                      <p>单价：<span style="color: red; font-size: 18px; font-weight: 700;">{{ item.price }}</span><span>￥</span></p>
                    </div>
                  </div>
                </el-form-item>


              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index" />
          <el-table-column label="订单编号" prop="orderId" />
          <el-table-column label="景点名称" prop="scName" width="180px" />
          <el-table-column label="下单用户ID" prop="userId" />
          <el-table-column label="总价/￥" prop="sumPrice" sortable />
          <el-table-column label="数量" prop="num" sortable />
          <el-table-column label="下单时间" prop="createTime" sortable width="200px" />

          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 0" type="info">未支付</el-tag>
              <el-tag v-if="scope.row.status == 1" type="primary">未使用</el-tag>
              <el-tag v-if="scope.row.status == 2" type="success">已使用</el-tag>
            </template>
          </el-table-column>

          <!--      操作栏-->
         
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>

        <el-dialog :visible.sync="DataVis" title="数据可视化" width="60%" top="60px">
          <SpotTicketPie :dataPie="datapie"></SpotTicketPie>
          </el-dialog>

      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
import SpotTicketPie from '@/components/SpotTicketPie.vue';
export default {
  name: "TicketInfo",
  components:{
    SpotTicketPie
  },
  data() {



    return {
      datapie:[
                { value: 1048, name: '景点1' },
                { value: 735, name: '景点2' },
                { value: 580, name: '景点3' },
                { value: 484, name: '景点4' },
                { value: 300, name: '景点5' },
                { value: 300, name: '景点6' },
                { value: 300, name: '景点7' }
            ],
      DataVis:false,
      s_userId:null,
      s_orderId:null,
      options: [
        {
          value: 0,
          label: '未支付'
        },
        {
          value: 1,
          label: '未使用'
        },
        {
          value: 2,
          label: '已使用'
        },
      ],
      value: '',
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
      search: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      CoverdialogVisible: false,
      MoredialogVisible: false,
      json_fields:{
        订单编号:'orderId',
        下单用户:'userId',
        对应景点:'scName',
        门票数量:'num',
        总价:'sumPrice',
        门票类型:{
          field: "orderDetail",
          //自定义回调函数
          callback: value => {
            return value[0].typeName
          }
        },
        下单时间:'createTime',
        订单状态:{
          field: "status",
          //自定义回调函数
          callback: value => {
            if(value==0){
              return '未支付'
            }else if(value==1){
              return '未使用'
            }else{
              return '已使用'
            }
          }
        }
      },
      tableData: [
        {
          orderId: 1,
          scId: 1,
          scName: '张家界森林公园',
          sumPrice: 1000,
          num: 5,
          userId: 1,
          status: 1,
          createTime: '2021-11-2 10:00:11',
          orderDetail: [{
            orderDetailId: 1,
            createTime: '2021-11-2 10:00:11',
            bookName: '张三',
            palyerName: '李四',
            typeName: '成人票',
            price: 240,
          },
          {
            orderDetailId: 2,
            createTime: '2021-11-2 10:00:11',
            bookName: '张111',
            palyerName: '李111',
            typeName: '成人票',
            price: 240,
          }
          ]
        }
      ],


      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 500);
  },
  methods: {
    dataTicket(){
      this.DataVis = true
    },
    handleStatus(index, row, status) {
      // this.tableData[index].status = status
    },
    async load() {
      request.get("/ticket-order/adminlist", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                search: this.search,
                status:this.value,
                userId:this.s_userId,
                orderId:this.s_orderId
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        });
    },
    reset() {
      this.currentPage = 1
      this.pageSize = 10
      this.search = null
      this.value = null
      this.s_userId = null
      this.s_orderId = null
      
      this.load()
    },
    
    cancel() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    save() {
      
    },
    add() {
      this.dialogVisible = true;
      this.judge = false;
      this.form = {}
    },
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },

  }


}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
</style>